<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href=""> -->
    <style>
        #list{
            width: 200px;
            height: 200px;
            background: red;
            font-family: '宋体';
            /* font-style: italic; */
            font-size: 30px;
            font-weight: bolder;
            color: white;
            list-style: none;
        }
        /* 设置段落首行缩进2字符，用2em */
        .indent{text-indent: 2em;}
        .font-20{font-size: 20px;}
        /* 向右缩进固定距离，就px */
        input{text-indent: 15px;}
        .title{
            text-align: center;
            /* text-decoration: line-through; */
        }
        .study{
            width: 200px;
            height: 200px;
            background: gray;
            text-align: center;
        }
        a{text-decoration: none;}
        .h36{line-height: 36px;}
        .nav{
            line-height: 100px;
            background: #f00;
            font-size: 30px;
            font-weight: bold;
        }
        /*  a标签的字体颜色，
            不会继承父级的，
            一定设置在a标签上。
        */
        .nav a{color: #ff0;}
    </style>
</head>
<body>
    <p class="nav">
        <a href="">首页</a>
        <a href="">新闻</a>
    </p>
    <h1 class="title">时习之丨共赴“进博之约”</h1>
    <p class="study">
        <a href="">
            学习宣传贯彻<br />党的二十大精神
        </a>
    </p>
    <!-- 字体大小默认是16px -->
    <input type="text" placeholder="用户名">
    <p>设置文本缩进</p>
    <p class="indent h36 font-20">2023年11月5日至10日，第六届进博会在国家会展中心（上海）举办。作为世界上首个以进口为主题的国家级展会，进博会已经成为中国构建新发展格局的窗口、推动高水平开放的平台、全球共享的国际公共产品。   </p>
    <p class="indent">设置文本缩进</p>
    <p style="text-indent: 32px;">设置文本缩进</p>
    <!-- 标签先成对写好 -->
    <ul>
        <li>字体类型</li>
        <li>222</li>
    </ul>
    <ul id="list">
        <li>字体类型</li>
        <li>222</li>
    </ul>
</body>
</html>